<template>
  <div class="content">
    <nav-title title="欢迎您加入新城" :notback="false"/>
    <div class="top-bg">
      <div class="portrait" :style="{backgroundImage: 'url(' + headfimg + ')' }">
      </div>
      <input v-if="showNot == 0" class="uploadbg" @change="upload" type="file" name="file" id="file" accept="image/*" >
    </div>
    <div class="line" v-if="showNot == 0"  style="margin-top:80px;">
      <div class="avatar">
        <div class="avatar-bac">
          <img src="./image/u29.png" alt="">
        </div>
      </div>
      <div class="text-box">
        <router-link to="/informationCollection/userInfo" tag="div">
          <h2 class="">基本信息采集</h2>
        </router-link>
      </div>
      <div class="icon">
        >
      </div>
    </div>
    <div class="line" v-if="showNot == 0">
      <div class="avatar">
        <div class="avatar-bac">
          <img src="./image/u34.png">
        </div>
      </div>
      <div class="text-box">
        <router-link to="/infoupload" tag="div">
          <h2>入职材料补充</h2>
        </router-link>
      </div>
      <div class="icon">
        >
      </div>
    </div>
    <div style="font-size:1.5em;margin-top:100px;" v-if="showNot == 1">
      您已完成入职办理流程，</br>
      无需重复提交数据！
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import Exif from './exif.js'
  import {getQrmsg,gethead,savehead} from '../../api/api'
  export default {
    name: "information-collection",
    data() {
      return {
        empid:'',
        showNot: 0,
        headfimg:'',
        picValue: ''
      }
    },
    created(){
      if(this.$route.params.hirdid){
        this.$store.state.hid = this.$route.params.hirdid
        this.empid = this.$route.params.hirdid
        this.getBsInfo()
        this.userDetail()
      }else{
        this.empid = this.$store.state.hid
        this.getBsInfo()
        this.userDetail()
      }
    },
    methods: {
      getBsInfo() {
        let params = {rsHireId: this.empid}
        getQrmsg(params).then(res => {
          if (res && res.retCode === '000000') {
            if(res.retData != ''){
              this.showNot = 0
            }else{
              this.showNot = 1
            }
          }
        })
      },

      userDetail() {
        //根据 emplId,cSeqno 获取用户信息
        var params = {
          rsHireId: this.empid
        };
        gethead(params).then(res=>{
          console.log(res.retData)
          //成功：000000
          if(res && res.retCode === '000000'){
              this.headfimg = res.retData.imgUrl;
            }else if(res && res.retCode === '002002'){
            this.headfimg  = require('./image/man.png');
          }else{
            this.headfimg  = require('./image/man.png');
          }
        }).catch( res=>{
          this.headfimg  = require('./image/man.png');
        });

      },

      upload (e) {
            let files = e.target.files || e.dataTransfer.files;
            if (!files.length) return;
            this.picValue = files[0];
            this.imgPreview(this.picValue);
          },
          imgPreview (file) {
            let self = this;
            let Orientation;

             Exif.getData(file, function(){
                 Orientation = Exif.getTag(this, 'Orientation');
             });
  
            if (!file || !window.FileReader) return;

            if (/^image/.test(file.type)) {

                let reader = new FileReader();

                reader.readAsDataURL(file);

                reader.onloadend = function () {
                  let result = this.result;
                  let img = new Image();
                  img.src = result;

                  if (this.result.length <= (100 * 1024)) {
                    self.headfimg = this.result;
                    self.postImg();
                  }else {
                    img.onload = function () {
                      let data = self.compress(img,Orientation);
                      self.headfimg = data;
                      self.postImg();
                    }
                  }
                }
              }
            },
            postImg () {
              const that = this;
                const formdata = new FormData()


                formdata.append('fileName', that.headfimg)
                formdata.append('rsHireId', that.empid)

                const options = {
                  url: '/api/hr/hirePhoto/upload',
                  method: 'post',
                  data: formdata
                  // {
                  //   fileName:that.headfimg,
                  //   rsHireId:that.empid
                  // },
                }
                this.$vux.loading.show({
                 text: '上传中'
                })
                const retVal = axios(options).then(res=>{
                  //that.headfimg = that.$store.state.picRootURL+res.data.retData.imgUrl
                  if(res.data.retCode === '000000'){
                    this.$vux.loading.hide()
                    this.$vux.alert.show({
                      title: '提示',
                      content: '上传成功'
                    })
                  }else{
                    this.$vux.alert.show({
                      title: '提示',
                      content: res.data.retMsg
                    })
                  }
                }).catch(e => {
                  this.$vux.alert.show({
                    title: '提示',
                    content: '上传失敗'
                  })
                })
            },
            rotateImg (img, direction,canvas) {

              const min_step = 0;
              const max_step = 3;
              if (img == null)return;

              let height = img.height;
              let width = img.width;
              let step = 2;
              if (step == null) {
                  step = min_step;
              }
              if (direction == 'right') {
                  step++;

                  step > max_step && (step = min_step);
              } else {
                  step--;
                  step < min_step && (step = max_step);
              }

              let degree = step * 90 * Math.PI / 180;
              let ctx = canvas.getContext('2d');
              switch (step) {
                case 0:
                    canvas.width = width;
                    canvas.height = height;
                    ctx.drawImage(img, 0, 0);
                    break;
                case 1:
                    canvas.width = height;
                    canvas.height = width;
                    ctx.rotate(degree);
                    ctx.drawImage(img, 0, -height);
                    break;
                case 2:
                    canvas.width = width;
                    canvas.height = height;
                    ctx.rotate(degree);
                    ctx.drawImage(img, -width, -height);
                    break;
                case 3:
                    canvas.width = height;
                    canvas.height = width;
                    ctx.rotate(degree);
                    ctx.drawImage(img, -width, 0);
                    break;
              }
          },
          compress(img,Orientation) {
            let canvas = document.createElement("canvas");
            let ctx = canvas.getContext('2d');

            let tCanvas = document.createElement("canvas");
            let tctx = tCanvas.getContext("2d");
            let initSize = img.src.length;
            let width = img.width;
            let height = img.height;

            let ratio;
            if ((ratio = width * height / 4000000) > 1) {
              ratio = Math.sqrt(ratio);
              width /= ratio;
              height /= ratio;
            } else {
              ratio = 1;
            }
            canvas.width = width;
            canvas.height = height;

            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            let count;
            if ((count = width * height / 1000000) > 1) {
              count = ~~(Math.sqrt(count) + 1); 

              let nw = ~~(width / count);
              let nh = ~~(height / count);
              tCanvas.width = nw;
              tCanvas.height = nh;
              for (let i = 0; i < count; i++) {
                for (let j = 0; j < count; j++) {
                  tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
                  ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
                }
              }
            } else {
              ctx.drawImage(img, 0, 0, width, height);
            }
            
            if(Orientation != "" && Orientation != 1){
              switch(Orientation){
                case 6:
                    this.rotateImg(img,'left',canvas);
                    break;
                case 8:
                    this.rotateImg(img,'right',canvas);
                    break;
                case 3:
                    this.rotateImg(img,'right',canvas);//转两次
                    this.rotateImg(img,'right',canvas);
                    break;
              }
            }
            
            let ndata = canvas.toDataURL('image/jpeg', 0.1);
            tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
            //const base64Data = await this.blobToDataURL(ndata)
          console.log(typeof(ndata))
            return ndata
          }
          //  blobToDataURL(blob) {
          //   var a = new FileReader();
          //   a.onload =  (e)=> { 
          //     return new Promise((r,v) => {
          //       r(e.target.result)
          //     })
          //   }
          //   a.readAsDataURL(blob);
          // }

    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .content {
    .top-bg {
      position: relative;
      width: 100%;
      height: 150px;
      background: url('../userInfo/image/userbg.png') no-repeat;
      background-size: cover;
      .portrait {
        position: absolute;
        width: 140px;
        height: 140px;
        background-size: 100% 100%;
        padding: 1px;
        top: 80px;
        left: 50%;
        margin-left: -70px;
        border-radius: 50%;
        box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
      }
      .uploadbg{
        position: absolute;
        width: 140px;
        height: 140px;
        background-size: 100% 100%;
        padding: 1px;
        top: 80px;
        left: 50%;
        margin-left: -70px;
        border-radius: 50%;
        box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        opacity:0;
      }
    }
    font-size: 14px;
    h2 {
      font-size: 16px;
      font-weight: 500;
    }
    .bac {
      height: 190px;
      width: 100%;
    }
    .line {
      display: flex;
      padding: 10px;
      align-items: center;
      box-shadow:5px 5px 5px #ccc;
      .avatar {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        .avatar-bac{
          background-color: #1CAAFE;
          background-size: 40px 40px;
          width: 40px;
          height: 40px;
          font-weight: 400;
          font-style: normal;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .text-box {
        flex: 3;
        text-align: left;
        margin-left: 12px;
        .identifying {
          color: #CC3300;
          font-size: 12px;
        }
      }
      .icon {
        flex: 1;
        font-size: 36px;
        color: #888888;
        font-weight: 500;
      }
    }
  }
</style>
